<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>https://codepen.io/ispal/pen/LxjgEj</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
</head>
<body translate="no">
<div class="left">
    <div class="left_inner">
        <h1>Funky Pure CSS Accordion</h1>
        <h2>Go on, give it some clicks</h2>
        <a class="download" href="https://codepen.io/jcoulterdesign/pens/popular/" target="_blank">
            <i class="icon ion-eye"></i> <span>View my other pens</span>
        </a>
        <a class="follow" href="https://codepen.io/jcoulterdesign/" target="_blank">
            <i class="icon ion-social-codepen-outline"></i> <span>Follow me on codepen</span>
        </a>
    </div>
</div>
<div class="right">
    <div class="app">
        <div class="app_inner">
            <input checked="" id="tab-1" name="buttons" type="radio">
            <label for="tab-1">
                <div class="app_inner__tab">
                    <h2>
                        <i class="icon ion-android-alarm-clock"></i>
                        8am - 10am
                    </h2>
                    <div class="tab_left">
                        <i class="big icon ion-android-color-palette"></i>
                        <div class="tab_left__image">
                            <i class="icon ion-android-color-palette"></i>
                        </div>
                    </div>
                    <div class="tab_right">
                        <h3>Jamie talks design</h3>
                        <h4>Monday - Thursday</h4>
                        <p>I talk a bunch of rubbish</p>
                        <button>More information</button>
                    </div>
                </div>
            </label>
            <input false="" id="tab-2" name="buttons" type="radio">
            <label for="tab-2">
                <div class="app_inner__tab">
                    <h2>
                        <i class="icon ion-android-alarm-clock"></i>
                        10am - 12am
                    </h2>
                    <div class="tab_left">
                        <i class="big icon ion-music-note"></i>
                        <div class="tab_left__image">
                            <i class="icon ion-music-note"></i>
                        </div>
                    </div>
                    <div class="tab_right">
                        <h3>Arctic Monkeys Live</h3>
                        <h4>Monday - Wednesday</h4>
                        <p>Music for your lug holes</p>
                        <button>More information</button>
                    </div>
                </div>
            </label>
            <input false="" id="tab-3" name="buttons" type="radio">
            <label for="tab-3">
                <div class="app_inner__tab">
                    <h2>
                        <i class="icon ion-android-alarm-clock"></i>
                        12am - 4pm
                    </h2>
                    <div class="tab_left">
                        <i class="big icon ion-android-microphone"></i>
                        <div class="tab_left__image">
                            <i class="icon ion-android-microphone"></i>
                        </div>
                    </div>
                    <div class="tab_right">
                        <h3>Steven Fry podcast</h3>
                        <h4>Staurday - Sunday</h4>
                        <p>Steven Fry says words</p>
                        <button>More information</button>
                    </div>
                </div>
            </label>
            <input false="" id="tab-4" name="buttons" type="radio">
            <label for="tab-4">
                <div class="app_inner__tab">
                    <h2>
                        <i class="icon ion-android-alarm-clock"></i>
                        4pm - 8pm
                    </h2>
                    <div class="tab_left">
                        <i class="big icon ion-android-bar"></i>
                        <div class="tab_left__image">
                            <i class="icon ion-android-bar"></i>
                        </div>
                    </div>
                    <div class="tab_right">
                        <h3>Massive event</h3>
                        <h4>Monday - Friday</h4>
                        <p>Some kind of music festival</p>
                        <button>More information</button>
                    </div>
                </div>
            </label>
        </div>
    </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>





</body>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="script.js"></script>
</html>